Highcharts এমন একটি লাইব্রেরি যা শুধুমাত্র দৃশ্যমান ভিজুয়ালাইজেশন তৈরি করার জন্য নয়, বরং অ্যাক্সেসিবিলিটি নিশ্চিত করার জন্যও ডিজাইন করা হয়েছে। এটি ব্যবহারকারীদের বিভিন্ন ধরনের screen reader এবং keyboard navigation সমর্থন প্রদান করে, যা বিশেষভাবে ভিজ্যুয়াল ইম্পেয়ারড (বিশৃঙ্খল দৃষ্টি) ব্যবহারকারীদের জন্য কার্যকরী।
এই ফিচারগুলি WCAG (Web Content Accessibility Guidelines) মান অনুসরণ করে এবং A11y (Accessibility) টুলের মাধ্যমে অ্যাক্সেসিবিলিটি উন্নত করে।
Screen Reader Support in Highcharts
Highcharts আপনাকে চার্টের মধ্যে থাকা ডেটা, টাইটেল, লেবেল এবং অন্যান্য গুরুত্বপূর্ণ এলিমেন্টগুলি screen readers এর মাধ্যমে পড়ে শোনাতে সহায়তা করে। Highcharts এর ডিফল্ট A11y (accessibility) সেটিংস এর মাধ্যমে, আপনি screen reader এর জন্য উপযুক্ত টেক্সট এবং লেবেল পেতে পারেন।
উদাহরণ: Highcharts Screen Reader Support
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Highcharts Screen Reader Example</title>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/accessibility.js"></script>
</head>
<body>
<div id="container" style="width:100%; height:400px;"></div>
<script>
Highcharts.chart('container', {
chart: {
type: 'column',
accessibility: {
enabled: true, // Screen reader support সক্রিয় করা
description: 'A bar chart showing sales data for the year.'
}
},
title: {
text: 'Sales Data'
},
xAxis: {
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May'],
accessibility: {
description: 'Months of the year' // xAxis এর জন্য ডেসক্রিপশন
}
},
yAxis: {
title: {
text: 'Sales'
},
accessibility: {
description: 'Sales in dollars' // yAxis এর জন্য ডেসক্রিপশন
}
},
series: [{
name: 'Sales',
data: [100, 200, 300, 400, 500],
accessibility: {
exposeAsGroupOnly: true // সিরিজগুলিকে গ্রুপ হিসেবে প্রকাশ করা
}
}]
});
</script>
</body>
</html>
ব্যাখ্যা:
- accessibility.enabled: এই অপশনটি screen reader এবং অ্যাক্সেসিবিলিটি সমর্থন সক্রিয় করে।
- accessibility.description: চার্ট বা অক্ষের বর্ণনা দেওয়া, যা screen readers দ্বারা পড়ে শোনা যাবে।
- accessibility.exposeAsGroupOnly: সিরিজের ডেটাকে group হিসেবে প্রকাশ করা হয়, যাতে ব্যবহারকারী ট্যাব কিবোর্ড ব্যবহার করে সেগুলির মধ্যে সহজে চলাচল করতে পারে।
এভাবে screen reader ব্যবহারকারী চার্টের বিভিন্ন উপাদান যেমন টাইটেল, লেবেল, এবং ডেটা পয়েন্ট সম্পর্কে তথ্য পেতে পারেন।
Keyboard Navigation in Highcharts
Keyboard navigation এর মাধ্যমে ব্যবহারকারীরা কিবোর্ডের মাধ্যমে চার্টের বিভিন্ন অংশে নেভিগেট করতে পারেন। Highcharts এ tab এবং arrow keys এর মাধ্যমে বিভিন্ন চার্ট এলিমেন্টে নেভিগেট করা যায়। এটি বিশেষভাবে visually impaired ব্যবহারকারীদের জন্য সহায়ক।
উদাহরণ: Highcharts Keyboard Navigation
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Highcharts Keyboard Navigation Example</title>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/accessibility.js"></script>
</head>
<body>
<div id="container" style="width:100%; height:400px;"></div>
<script>
Highcharts.chart('container', {
chart: {
type: 'column',
accessibility: {
enabled: true // Keyboard navigation সক্রিয় করা
}
},
title: {
text: 'Sales Data'
},
xAxis: {
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May'],
accessibility: {
description: 'Months of the year'
}
},
yAxis: {
title: {
text: 'Sales'
},
accessibility: {
description: 'Sales in dollars'
}
},
series: [{
name: 'Sales',
data: [100, 200, 300, 400, 500],
accessibility: {
exposeAsGroupOnly: true
}
}]
});
</script>
</body>
</html>
ব্যাখ্যা:
- accessibility.enabled: এই অপশনটি কিবোর্ড নেভিগেশন সক্রিয় করে, যার মাধ্যমে ব্যবহারকারী কিবোর্ডের মাধ্যমে চার্টের বিভিন্ন অংশে নেভিগেট করতে পারে।
- tab এবং arrow keys ব্যবহার করে ব্যবহারকারী সহজে series, xAxis, yAxis ইত্যাদির মধ্যে চলাচল করতে পারেন।
Highcharts কাস্টম কিবোর্ড নেভিগেশনও সমর্থন করে, যা ব্যবহারকারীকে ট্যাব, অ্যারো কী, এবং স্পেস বারের মাধ্যমে চার্টের বিভিন্ন এলিমেন্টে দ্রুত নেভিগেট করতে সাহায্য করে।
Highcharts Accessibility Features
Highcharts এর accessibility মোডে কিছু অতিরিক্ত বৈশিষ্ট্য রয়েছে যা ব্যবহারকারীর অভিজ্ঞতা উন্নত করে, যেমন:
- Tooltip: screen reader এ জন্য কাস্টম টুলটিপ তৈরির সুবিধা।
- High-contrast Mode: উচ্চ কনট্রাস্টের জন্য চার্টের রঙ কাস্টমাইজেশন।
- Keyboard Shortcuts: চার্টের মাধ্যমে দ্রুত নেভিগেট করার জন্য কিবোর্ড শর্টকাট।
- Skip Links: ট্যাব অর্ডারের মধ্যে স্কিপ লিঙ্ক যুক্ত করা।
এছাড়া, Highcharts কাস্টম অ্যাক্সেসিবিলিটি মডিউল ব্যবহার করে a11y (অ্যাক্সেসিবিলিটি) উন্নত করতে আরও অনেক কিছু কাস্টমাইজেশন করা যেতে পারে।
উপসংহার
Highcharts-এর screen reader support এবং keyboard navigation ফিচারগুলি অ্যাক্সেসিবিলিটি নিশ্চিত করতে সহায়ক, যা visually impaired ব্যবহারকারীদের জন্য বিশেষভাবে উপযোগী। WCAG অনুসরণ করে তৈরি করা এই ফিচারগুলি আপনার চার্টকে আরও অন্তর্ভুক্তমূলক এবং ব্যবহারকারী-বান্ধব করে তোলে। আপনি screen reader support, keyboard navigation, এবং accessibility options কাস্টমাইজ করে আপনার চার্টের এক্সপিরিয়েন্স উন্নত করতে পারেন, যা সকল ব্যবহারকারীর জন্য সাশ্রয়ী এবং কার্যকরী।
Read more
